import React, {useEffect} from 'react'
import {withRouter} from 'react-router-dom'
import {connect,} from 'react-redux'
import Bg from '../../../../../../res/images/web/topic/huati bg@2x.png'
import Bai from '../../../../../../res/images/web/topic/bai@2x.png'
import Touming from '../../../../../../res/images/web/topic/touming@2x.png'
import Talk from '../../../../../../res/images/web/topic/talk@2x.png'
import Total from '../../../../../../res/images/web/topic/zaixian@2x.png'
import Canyu from '../../../../../../res/images/web/topic/canyu@2x.png'
import JinRu from '../../../../../../res/images/web/topic/jinru@2x.png'
import {WingBlank} from "antd-mobile";
import './TopicBanner.css'

const TopicBanner = props => {

    const getCommentTotal = () => {
        props.doGetTopicTotal()
    }

    useEffect(() => {
        getCommentTotal()
    }, [])

    const img = <img
        src={Bg}
        alt=''
        style={{
            width: '100%',
        }}
    />

    const total = <div className='flex-align-center'>
        <div
            style={{
                position: 'relative',
                marginRight: '-2px',
            }}
        >
            <img
                alt=''
                src={Bai}
                style={{
                    width: 36,
                    height: 18,
                }}
            />
            <span
                style={{
                    position: 'absolute',
                    top: '50%',
                    left: '45%',
                    transform: 'translate(-50%, -50%)',
                    whiteSpace: 'nowrap',
                }}
            >
                话题
            </span>

        </div>
        <div
            style={{
                position: 'relative',
            }}
        >
            <img
                alt=''
                src={Touming}
                style={{
                    width: 54,
                    height: 18,
                }}
            />
            <img
                alt=''
                src={Talk}
                style={{
                    height: 9,
                    width: 9,
                    position: 'absolute',
                    left: '8px',
                    top: '50%',
                    transform: 'translateY(-50%)',
                }}
            />
            <span
                style={{
                    color: 'rgba(255,255,255,1)',
                    position: 'absolute',
                    top: '50%',
                    left: '21px',
                    transform: 'translateY(-50%)',
                    whiteSpace: 'nowrap',
                }}
            >
                {props.topic.total}
            </span>
        </div>
    </div>

    // const total = <div
    //     style={{
    //         width: '62px',
    //         height: '16px',
    //         background: 'rgba(51,51,51, 0.1)',
    //         borderRadius: '8px',
    //         display: 'flex',
    //         justifyContent: 'center',
    //         alignItems: 'center',
    //         marginLeft: '98px',
    //     }}
    // >
    //     <img src={Total} alt='' style={{height: 10, width: 10, marginRight: 12}}/>
    //     <span
    //         style={{
    //             fontSize: '10px',
    //             fontWeight: '500',
    //             color: 'rgba(51,51,51,1)',
    //             lineHeight: '14px',
    //         }}
    //     >{props.topic.total}</span>
    // </div>


    const tag = <div
        className='topic-banner-detail-ctn'
    >
        {total}
        <p
            className='topic-banner-detail-title'
            style={{

                fontWeight: 600,
                color: 'rgba(255,255,255,1)',
                lineHeight: '28px',
                textShadow: '0px 2px 1px rgba(0,0,0,0.5)',
                whiteSpace: 'nowrap',
            }}
        >
            足球话题讨论区
        </p>
        <p
            style={{
                fontSize: '12px',
                color: 'rgba(255,255,255,1)',
                lineHeight: '15px',
            }}
        >
            欢迎在这里和大家一起讨论哦！
        </p>
        <div
            style={{position: 'relative', height: 32,}}
        >
            <img alt='' src={Canyu}
                style={{
                    height: 32,
                    width: 90,
                }}
            />
            <span
                style={{
                    position: 'absolute',
                    top: '50%',
                    transform: 'translateY(-50%)',
                    left: '12px',
                    color: '#3B5B20',
                    lineHeight: '20px',
                }}
            >
                立即参与
            </span>
            <img alt='' src={JinRu}
                 style={{
                     position: 'absolute',
                     width: 10,
                     height: 10,
                     left: 68,
                     top: '50%',
                     transform: 'translateY(-50%)',
                 }}
            />
        </div>
    </div>

    return <WingBlank>
        <div
            style={{
                width: '100%',
                position: 'relative',
            }}
            onClick={() => props.history.push('/topic')}
        >
            {img}
            {tag}
        </div>
    </WingBlank>

}

const mapState = state => ({
    topic: state.topic,
})

const mapDispatch = dispatch => ({
    doGetTopicTotal: (payload) => dispatch.topic.doGetTopicTotal(payload),
})

export default connect(mapState, mapDispatch)(withRouter(TopicBanner))
